<template>
	<div class="timebox">
		<ul class="header">
			<li class="time">
				<span class="sp1">{{ nowDay }}</span>
				<br>
				<span class="sp2">{{ nowMonth }}</span>
			</li>
			<li>
				<div class="shu"></div>
			</li>
			<li>
				<span class="sp3">{{ ribao }}</span>
			</li>
			<li class="login">
				<img src="../images/login.png" alt="" @click="login" ref="lll">
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				nowDay:null,
				nowMonth:null,
				user:{},
				ribao:""
			}
		},
		mounted() {
			// this.timer = setInterval(this.getTime, 1000);
			this.getTime()
			this.user = localStorage.getItem("userinfo")
			this.$refs.lll.src = JSON.parse(localStorage.getItem("userinfo1")).src
		},
		methods:{
			getTime(){
				let data = new Date()
				let month = data.getMonth()+1
				let day = data.getDate()
				let hour = data.getHours()
				if(hour >= 6 && hour < 11){
					this.ribao = "上午好"
				}
				if(hour >= 11 && hour < 13){
					this.ribao = "中午好"
				}
				if(hour >= 13 && hour < 18){
					this.ribao = "下午好"
				}
				if(hour >= 18 && hour < 24){
					this.ribao = "晚上好"
				}
				if(hour >=1 && hour <6){
					this.ribao = "你该睡了"
				}
				console.log(hour)
				this.month=check(month)
				this.day=check(day)
				
				function check(i){
					let num = (i<10)?("0"+i) : i;
					return num;
				}
				this.nowDay = this.day
				switch(month){
					case 1:
						return this.nowMonth = "一月";
					case 2:
						return this.nowMonth = "二月";
					case 3:
						return this.nowMonth = "三月";
					case 4:
						return this.nowMonth = "四月";
					case 5:
						return this.nowMonth = "五月";
					case 6:
						return this.nowMonth = "六月";
					case 7:
						return this.nowMonth = "七月";
					case 8:
						return this.nowMonth = "八月";
					case 9:
						return this.nowMonth = "九月";
					case 10:
						return this.nowMonth = "十月";
					case 11:
						return this.nowMonth = "十一月";
					case 12:
						return this.nowMonth = "十二月";
				}
			},
			login:function(){
				if(this.user == ""){
					this.$router.push({
						path:'/login',
					})
				}else{
					this.$router.push({
						path:'/mine',
					})
				}
				
			}
		}
	}
</script>

<style lang="less" scoped>
	*{
		margin: 0;
		padding: 0;
	}
	ul li{
		list-style: none;
	}
	.timebox{
		overflow: hidden;
	}
	.header{
		width: 100%;
		height: 50px;
		position: fixed;
		z-index: 10;
		top:0;
		left: 0;
		background: #fff;
		padding-bottom: 5px;
		overflow: hidden;
	}
	.header li{
		float: left;
	} 
	.clear{
		clear: both;
	}
	.time{
		display: inline-block;
		margin-right: 10px;
		.sp1{
			font-weight: 600;
			font-size: 25px;
			color: #323233;
		}
		.sp2{
			font-size: 16px;
			color: #323233;
		}
	}
	.shu{
		display: inline-block;
		width: 1px;
		height: 50px;
		background: #444;
	}
	.sp3{
		display: inline-block;
		padding-top: 10px;
		font-size: 30px;
		margin-left: 10px;
		font-weight: 600;
	}
	.login{
		float: right!important;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		img{
			width: 100%;
			height: inherit;
			border-radius: 50%;
			margin: 8px 0px 10px -20px;
		}
	}
</style>
